<template>
    <div class="sys-org-container">
        <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="1000px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <div>
                <screeningCondition :inquireInfo="state.inquireInfo" @getChildren="handleQuery"></screeningCondition>
                <el-table :data="state.Data" style="width: 100%;height: 100%;" row-key="id" default-expand-all
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
                    :cell-style="{ padding: '2px' }" @selection-change="selectionLineChangeHandle"
                    @row-click="handleCurrentChange" ref="tableRef">
                    <el-table-column type="selection" width="40" align="center" />
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="TemplateNo" label="任务编号" header-align="center" show-overflow-tooltip
                        align="center" />
                    <el-table-column prop="temlogicName" label="任务名称" align="center" show-overflow-tooltip />
                 
                    <el-table-column prop="pointNum" label="点位数" width="70" align="center"
                        show-overflow-tooltip />
                    <el-table-column prop="holdingPoint" label="是否为等待点" align="center" show-overflow-tooltip>
                        <template v-slot="scope">
                            <span v-if="scope.row.holdingPoint==1">是</span>
                            <span v-else>否</span>
                        </template>
                        </el-table-column>

                </el-table>
                <!-- 分页条 -->
                <el-pagination v-model:current-page="state.queryParams.page"
                    v-model:page-size="state.queryParams.pageSize" :page-sizes="[10, 20, 30, 40]"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
                    @size-change="handleSizeChange" @current-change="handlePresentChange" :small="true" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="sysEditOrg">
    import { onMounted, reactive, ref } from 'vue';
    import { WmsApi } from "/@/api/wh";
    import screeningCondition from '/@/views/tools/screeningCondition.vue'


    const props = defineProps({
        title: String,
        currentObj:Number
    });
    const currentObj = props.currentObj 
    const emits = defineEmits(['handleQuery']);
    const ruleFormRef = ref();
    const tableRef = ref();
    const state = reactive({
        isShowDialog: false,
        total: 0,
        orgTypeList: [],
        dataonLineListSelections: [],
        Data: [],
        queryParams: {
            temLogicName: '',
            TemLogicNo: '',
            page: 1,//当前页
            pageSize: 10
        },
        inquireInfo: [
            {
                label: "物料号",
                value: "",
                key: "materielNum",
                options: [],
                type: 'input'

            },
            {
                label: "物料规格",
                value: "",
                key: "materielSpecs",
                options: [],
                type: 'input'
            }
        ],
        preCondition: {}
    });

    onMounted(async () => {
        handleQuery(state.queryParams);
    });
    // 单选行
    const handleCurrentChange = (val) => {
        console.log(tableRef.value);
        
        tableRef.value.clearSelection() // 清空所有选择
        tableRef.value.toggleRowSelection(val) //  选中当前选择
    }

    const handleQuery = (value) => {
   
        state.preCondition = value
        var params = {
            page: state.queryParams.page,
            pageSize: state.queryParams.pageSize,
            TemLogicNo: value.TemLogicNo,
            temLogicName: value.temLogicName
        }
        WmsApi().modelPagePost(params)
            .then(function (res) {
           
                state.Data = res.data.result.items;
                state.total = res.data.result.total;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    // 打开弹窗
    const openDialog = (row) => {
        state.isShowDialog = true;
  
        
        tableRef.value.clearSelection(); 
    };

    // 关闭弹窗
    const closeDialog = () => {
        emits('handleQuery', state.dataonLineListSelections);
        state.isShowDialog = false;
    };

    // 取消
    const cancel = () => {
        state.isShowDialog = false;
    };

    const handleSizeChange = (val) => {
        state.queryParams.pageSize = val;
        state.queryParams.materielNum = state.preCondition.materielNum;
        state.queryParams.materielSpecs = state.preCondition.materielSpecs;
        handleQuery(state.queryParams)

    }
    const handlePresentChange = (val) => {
        state.queryParams.page = val;
        state.queryParams.materielNum = state.preCondition.materielNum;
        state.queryParams.materielSpecs = state.preCondition.materielSpecs;
        handleQuery(state.queryParams)

    }
    // 提交
    const submit = () => {
        // ruleFormRef.value.validate(async (valid: boolean) => {
        // 	if (!valid) return;
        // 	if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
        // 		await getAPI(SysOrgApi).apiSysOrgUpdatePost(state.ruleForm);
        // 	} else {
        // 		await getAPI(SysOrgApi).apiSysOrgAddPost(state.ruleForm);
        // 	}
        // 	closeDialog();
        // });
        closeDialog();
    };
    const selectionLineChangeHandle = (val) => {
        state.dataonLineListSelections = val
    }

    // 导出对象
    defineExpose({ openDialog, currentObj});
</script>